<template>
<div class="CLGL">
    <!-- 内容区导航 -->
    <div class="ZTnav">
        <div>
            <div class="ZTinpt">
                <span>车牌号</span>
                <el-input placeholder="请输入" v-model="searchCondition.busNumber"></el-input>
            </div>
            <div class="ZTinpt">
                <span>车辆自编号</span>
                <el-input placeholder="请输入" v-model="searchCondition.busSelfId"></el-input>
            </div>
            <div class="ZTinpt">
                <span>所属区域</span>
                <el-cascader v-model="searchCondition.busRegion" :options="area"></el-cascader>
            </div>
            <div class="ZTinpt">
                <span>所属项目</span>
                <el-select v-model="searchCondition.proId" placeholder="请选择">
                    <el-option v-for="item in ssxm" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="ZTinpt">
                <span>设备IP</span>
                <el-input placeholder="请输入" v-model="searchCondition.hostIp"></el-input>
            </div>
            <button @click="resetCondition">重置</button>
            <button @click="conditionSearch(1,numVal)">查询</button>
        </div>
    </div>
    <!-- 内容区 -->
    <div class="ZTcontent">
        <div class="ZTinfo">
            <button @click="showdetail_xinzeng()">新增信息</button>
            <button @click="hide_pl()">批量导入</button>
        </div>
        <!-- el表格 -->
        <div class="clgl_table">
            <el-table :header-cell-style="{background:'#EBF1FC',color:'#606266'}" :data="clDetails" border stripe style="width: 100%">
                <el-table-column prop="id" label="序号" width="60">
                </el-table-column>
                <el-table-column prop="busNumber" label="车牌号" width="180">
                    <template slot-scope="scope">
                        <div class="table_key" @click="showDetailPage(scope.row.busNumber)">
                            {{scope.row.busNumber}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="busSelfId" label="车辆自编号">
                </el-table-column>
                <el-table-column prop="busType" label="车辆类型">
                </el-table-column>
                <el-table-column prop="busRegion" label="所属区域">
                </el-table-column>
                <el-table-column prop="busRegRoute" label="路线">
                </el-table-column>
                <el-table-column prop="busCompany" label="所属公司">
                </el-table-column>
                <el-table-column prop="proName" label="所属项目" width="200">
                    <template slot-scope="scope">
                        <el-tooltip :visible-arrow=false :open-delay=500 :offset=60 popper-class="pro-wrapper">
                            <span>
                                {{scope.row.proName}}
                            </span>
                            <div slot="content">{{scope.row.proName}}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="hostIp" label="设备IP">
                </el-table-column>
                <el-table-column prop="deviceId" label="主机ID">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="showdetail_bianji(scope.row.busNumber)" type="text" size="small">编辑</el-button>
                        <template>
                            <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' @confirm="deleteInfo(scope.row.busNumber)" icon="el-icon-info" icon-color="red" :title="'确定删除车辆 '+scope.row.busNumber+' 吗？'">
                                <el-button slot="reference" type="text" size="small" style="color:#F9243D">删除</el-button>
                            </el-popconfirm>
                        </template>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="ZTfooter">
            <span>共{{ infoTotal }}条</span>
            <el-select v-model="numVal" @change="pageTotalChange" placeholder="请选择">
                <el-option v-for="item in num" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-pagination layout="prev, pager, next" :total="this.totalPage" :current-page="currenPage" :page-size="this.pageSize" @current-change="handleCurrentChange">
            </el-pagination>
            <div class="goPage">
                <span>前往</span>
                <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="pageNumber" placeholder="1"></el-input>
                <span>页</span>
                <el-button class="goPageBtn" type="goon" @click="goPage">确定</el-button>
            </div>
        </div>
    </div>
    <!-- <transition name="el-fade-in-linear"> -->
    <el-dialog :visible="isopen_pl" width="432px" :before-close="hide_pl" class="import_dialog" @close="closePL">
        <!-- <div class="piliang" v-show="" > -->
        <div slot="title" class="import_header">
            <div class="import_title">批量导入</div>
            <!-- <span @click="hide_pl()"></span> -->
        </div>
        <div>
            <div class="plneicheng">
                <span></span>
                <div class="ssxm">
                    <span style="color:#F9243D">*</span><span>所属项目</span>
                    <el-select v-model="ssxmVal" placeholder="请选择" @change="changedisable">
                        <el-option v-for="item in ssxm" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <button @click="downloadTemplate">下载模板</button>
                </div>
                <el-upload ref="upload" class="upload-demo" drag action="" :http-request="uploadFile" :on-change="upchange" :before-upload="beforeAvatarUpload" list-type="text" :file-list="fileList" :disabled="changedis" :auto-upload="false" multiple>
                    <div class="upload-text">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload-text-b">将文件拖到此处，或点击上传</div>
                        <div class="el-upload-text">支持上传xsl/xlsx格式的Excel文件</div>
                    </div>
                </el-upload>

            </div>
        </div>
        <button class="cancel" @click="hide_pl">取消</button>
        <button class="confirm" @click="submitUpload">确定</button>
        <!-- </div> -->
    </el-dialog>

    <!-- </transition> -->
    <el-form :inline="true" label-position="right" label-width="93px" :model="detailBusInfo">
        <el-dialog :visible="detailShow" width="700px" :before-close="detailHide" class="busDetail">
            <!-- <div class="busDetail" v-show="detailShow"> -->
            <div class="detail_header" slot="title">
                <div class="detail_title">{{detailBusInfo.busNumber}}</div>
            </div>
            <div class="formItem">
                <el-form-item label="所属项目">
                    {{detailBusInfo.proName}}
                </el-form-item>
                <el-form-item label="所属区域">
                    {{detailBusInfo.busRegion}}
                </el-form-item>
                <el-form-item label="车辆自编号">
                    {{detailBusInfo.busSelfId}}
                </el-form-item>
                <el-form-item label="所属公司">
                    {{detailBusInfo.busCompany}}
                </el-form-item>
                <el-form-item label="所属路线">
                    {{detailBusInfo.busRegRoute}}
                </el-form-item>
                <el-form-item label="设备IP">
                    {{detailBusInfo.hostIp}}
                </el-form-item>
                <el-form-item label="主机ID">
                    {{detailBusInfo.deviceId}}
                </el-form-item>
            </div>
            <!-- <div class="modify-history">
                    <div class="mod-tag"></div>
                    <div class="mod-title">变更记录</div>
                    <div>
                    </div>
                </div> -->
            <!-- </div> -->
        </el-dialog>
    </el-form>
    <!-- 编辑 -->
    <!-- <transition name="el-fade-in-linear"> -->
    <el-dialog :visible="detailShow_bianji" width="700px" :before-close="busInfoEditCancel" ref="busInfo_edit">
        <template slot="title">
            <div class="edit_header">
                <div class="edit_title">编辑 {{editBusInfo.busNumber}}：</div>
            </div>
            <!-- <span class="quxiao" @click="busInfoEditCancel('editBusInfo')"></span> -->
        </template>
        <el-form :inline="true" label-position="right" label-width="100px" :model="editBusInfo" ref="editBusInfo">
            <div class="formItem">
                <el-form-item label="所属项目">
                    <el-select v-model="editBusInfo.proId" placeholder="请选择" @change="proChange">
                        <el-option v-for="item in ssxm" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属区域">
                    <el-cascader disabled v-model="editBusInfo.busRegion" :options="area"></el-cascader>
                </el-form-item>
                <el-form-item label="车辆自编号">
                    <el-input v-model="editBusInfo.busSelfId"></el-input>
                </el-form-item>
                <el-form-item label="所属公司">
                    <el-select v-model="editBusInfo.busCompany">
                        <el-option v-for="item in busCompany" :key="item.label" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属路线">
                    <el-input v-model="editBusInfo.busRegRoute"></el-input>
                </el-form-item>
                <!-- <el-form-item label="设备IP">
                        <el-input v-model="editBusInfo.hostIp"></el-input>
                    </el-form-item> -->
                <!-- <el-form-item label="主机ID">
                    <el-input :disabled="true" v-model="editBusInfo.deviceId"></el-input>
                </el-form-item> -->
                <div v-show="moreInfoShow">
                    <el-form-item label="车辆类型">
                        <el-input v-model="editBusInfo.busType"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆司机">
                        <el-input v-model="editBusInfo.busDriver"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆颜色">
                        <el-input v-model="editBusInfo.busColor"></el-input>
                    </el-form-item>
                </div>
            </div>
            <div class="more_edit">
                <!-- <div>更多</div> -->
                <i v-if="moreInfoShow" class="el-icon-arrow-up" @click="moreEditInfo"></i>
                <i v-else class="el-icon-arrow-down" @click="moreEditInfo"></i>

            </div>
        </el-form>
        <div slot="footer" class="busDetail_bianji_an">
            <el-button class="edit_confirm" type="primary" @click="busInfoEditConfirm('editBusInfo')">确定</el-button>
            <el-button class="edit_cancel" @click="busInfoEditCancel('editBusInfo')">取消</el-button>
        </div>
    </el-dialog>

    <!-- </transition> -->
    <!-- 新增 -->
    <el-form :inline="true" :rules="insertRule" label-position="right" label-width="93px" :model="insertBusinfo" ref="insertBusinfo">
        <el-dialog :visible="detailShow_xinzeng" width="700px" :before-close="busInfoInsertCancel">
            <div slot="title">
                <el-form-item class="add_header" label="车牌号" prop="busNumber">
                    <el-input v-model="insertBusinfo.busNumber" placeholder="请输入"></el-input>
                </el-form-item>
            </div>
            <div class="formItem">
                <el-form-item label="所属项目" class="form-item-project" prop="proId">
                    <el-select v-model="insertBusinfo.proId" placeholder="请选择" @change="proChange">
                        <el-option v-for="item in ssxm" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属区域">
                    <el-cascader disabled v-model="insertBusinfo.busRegion" :options="area"></el-cascader>
                </el-form-item>
                <el-form-item label="车辆自编号">
                    <el-input v-model="insertBusinfo.busSelfId"></el-input>
                </el-form-item>
                <el-form-item label="所属公司">
                    <el-select v-model="insertBusinfo.busCompany">
                        <el-option v-for="item in busCompany" :key="item.label" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属路线">
                    <el-input v-model="insertBusinfo.busRegRoute"></el-input>
                </el-form-item>
            </div>
            <div slot="footer" class="busDetail_bianji_an">
                <el-button class="edit_confirm" type="primary" @click="busInfoInsertConfirm('insertBusinfo')">确定</el-button>
                <el-button class="edit_cancel" @click="busInfoInsertCancel">取消</el-button>
            </div>
        </el-dialog>
    </el-form> 
</div>
</template>

<script>
import AreaDivision from "../../static/area.js";
export default {
    data() {
        var busNumberVarify = (rule, value, callback) => {
            this.isRepeat(value).then(repeat => {
                if (value == "") {
                    callback(new Error('请输入车牌号'))
                } else if (!isLicenseNo(value)) {
                    callback(new Error('请输入正确的车牌号'));
                } else if (repeat) {
                    callback(new Error('车牌号重复'));
                }
                callback();
            })
        };

        function isLicenseNo(str) {
            var regExp = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/;
            var regExp2 = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{5}[A-Z0-9挂学警港澳]{1}$)/;  
            if (!regExp.test(str) && !regExp2.test(str)) {
                return false;
            } else {
                return true;
            }
        }

        return {
            num: [
                {
                    value: 20,
                    label: "20条/页",
                },
                {
                    value: 50,
                    label: "50条/页",
                },
                {
                    value: 100,
                    label: "100条/页",
                },
            ],
            clDetails: [],
            value: "",
            numVal: 20,
            pageNumber: "",
            infoTotal: 100,
            currenPage: 1,
            totalPage: 100,
            pageSize: 10,
            isopen: false,
            isopen_pl: false,
            isnew: false,
            isinfo: false,
            ssxm: [],
            changedis: true,
            fileList: [],
            insertBusinfo: {
                busNumber: "",
                proName: '',
                busRegion: '',
                busSelfId: "",
                busCompany: "",
                busRegRoute: "",
                hostIp: "",
                deviceId: "",
            },
            insertRule: {
                busNumber: [{
                    required: true,
                    message: '请输入车牌号',
                    trigger: 'blur'
                }, {
                    validator: busNumberVarify,
                    trigger: 'blur'
                }],
                proId: [{
                    required: true,
                    message: "请选择项目名称",
                    trigger: 'change'
                }]
            },
            busCompany: [],
            valueArea: [],
            area: AreaDivision.arrAll,
            ssxmVal: "",
            detailBusInfo: {
                busNumber: "粤A88888",
                proName: '济南公交车载设备采购项目',
                busRegion: '山东省/济南市',
                busSelfId: "3215678",
                busCompany: "电车二分",
                busRegRoute: "M123",
                hostIp: "25.21.14.32",
                deviceId: "F1234566778",
            },
            detailBusNumber: "粤A88888",
            detailShow: false,
            detailShow_bianji: false,
            detailShow_xinzeng: false,
            searchCondition: {
                busNumber: "",
                busSelfId: "",
                busRegion: [],
                proId: "",
                hostIp: "",
            },
            moreInfoShow: false,
            editBusInfo: {
                busNumber: "",
                proName: '',
                busRegion: '',
                busSelfId: "",
                busCompany: "",
                busRegRoute: "",
                hostIp: "",
                deviceId: "",
                busType: "",
                busDriver: "",
                busColor: ""
            },
            busNumberList: [],
        };
    },
    created() {
        this.changePageList(1, this.numVal);
        this.getProjectList();
    },
    methods: {
        closePL(){
            let _this = this;
            _this.ssxmVal = null;
        },


        downloadTemplate() {
            let _this = this;
            _this.$axios({
                    url: "/businfo/download",
                    responseType: 'blob',
                    method: 'get'
                })
                .then((res) => {
                    const filename = res.headers["content-disposition"];
                    const blob = new Blob([res.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    // downloadElement.download = decodeURIComponent(filename.split("filename=")[1]);
                    downloadElement.download = decodeURIComponent("车辆信息模板.xlsx");
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                }).catch((e) => {
                    console.log("下载失败");
                })
        },
        uploadFile(params) {
            let _this = this;
            let fd = new FormData();
            fd.append('file', params.file);
            fd.append('proId', _this.ssxmVal)
            _this.$axios.post("businfo/import", fd).then((res) => {
                let code = res.data.code;
                if (code == 3) {
                    _this.$message.error(res.data.msg);
                     _this.isopen_pl =false;
                    _this.changePageList(1, this.numVal);
                    _this.fileList = [];
                } else if (code == 2) {
                    _this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    //关闭弹窗  刷新页面数据  清除批量导入数据
                    _this.isopen_pl =false;
                    _this.changePageList(1, this.numVal);
                    _this.fileList = [];
                }
            }).catch()
        },
        // 文件上传禁用
        changedisable() {
            this.changedis = false;
        },
        submitUpload() {
            let _this = this;
            _this.$refs.upload.submit();
        },
        // 批量导入自定义样式
        upchange(file, filelist) {
            var xiaoshi = document.querySelector('.el-upload-dragger');
            xiaoshi.style.height = "50px";
            var xiaoshitextb = document.querySelector('.el-upload-text-b');
            xiaoshitextb.innerHTML = "上传文件";
            var xiaoshitext = document.querySelector('.el-upload-text');
            xiaoshitext.style.display = 'none';
            var xiaoshiicon = document.querySelector('.el-icon-upload');
            xiaoshiicon.style.position = 'relative';
            xiaoshiicon.style.right = '60px';
            xiaoshiicon.style.top = '22px';
            var textlist = document.querySelector('.el-upload-list');
            textlist.style.border = '3px solid rgba(226,226,226)';
            textlist.style.borderRadius = '5px';
            textlist.style.height = '150px';
            textlist.style.background = 'rgb(249,249,249)';
            var cancel = document.querySelector('.cancel');
            cancel.style.display = "block"
            var confirm = document.querySelector('.confirm');
            confirm.style.display = "block"
        },
        beforeAvatarUpload(file) {
            const isText = file.type === 'application/vnd.ms-excel';
            const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (!isText && !isTextComputer) {
                this.$message.warning('请上传excel格式文件！');
            };
            return (isText || isTextComputer);
        },
        detailHide() {
            let _this = this;
            this.$confirm('确认关闭详情信息？')
                .then(e => {
                    _this.detailShow = false;
                })
                .catch(e => {});
        },

        showdetail_xinzeng() {
            let _this = this;
            _this.insertBusinfo = {}
            _this.detailShow_xinzeng = true;
        },

        deleteInfo(busNumber) {
            let _this = this;
            _this.$axios.post("businfo/delete", {
                busNumber: busNumber
            }).then((res) => {
                let code = res.data.code;
                if (code == 2) {
                    _this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    _this.changePageList(1, _this.numVal);
                } else if (code == 3) {
                    _this.$message.error(res.data.msg);
                }

            }).catch((e) => {
                console.log(e)
            })
        },
        // 添加车辆信息时，如果项目发生变化，所属区域也会变化
        proChange(pro) {
            let _this = this;
            _this.busCompany = [];
            // _this.insertBusinfo.busCompany = "";
            // _this.editBusInfo.busCompany = "";
            // _this.insertBusinfo.busRegion = [];
            _this.$axios.get("/project/getByPid?pid=" + pro)
                .then((res) => {
                    let project = res.data.data;
                    let cityCode = parseInt(project.cityCode);
                    let provinceCode = parseInt(project.provinceCode);
                    _this.editBusInfo.busRegion =
                        provinceCode == cityCode ? [cityCode] : [provinceCode, cityCode]
                    _this.insertBusinfo.busRegion =
                        provinceCode == cityCode ? [cityCode] : [provinceCode, cityCode]
                }).catch((e) => {
                    _this.$message.error(e);
                })
            _this.$axios.get("/company/getProComany?pid=" + pro)
                .then((res) => {
                    let companyList = res.data.data;
                    companyList.forEach((company) => {
                        _this.busCompany.push({
                            label: company.companyName,
                            value: company.companyName
                        })
                    })
                }).catch((e) => {
                    _this.$message.error(e);
                })
        },
        busInfoInsertCancel() {
            let _this = this;
            this.$confirm('确认不保存信息关闭？')
                .then(e => {
                    _this.detailShow_xinzeng = false;
                    _this.busCompany = [];
                    _this.insertBusinfo.busCompany = "";
                    _this.insertBusinfo.busRegion = [];
                    
                })
                .catch(e => {});

        },
        busInfoInsertConfirm(formName) {
            let _this = this;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    let businfo = _this.insertBusinfo;
                    _this.$axios.post("businfo/add", {
                            busNumber: businfo.busNumber,
                            busSelfId: businfo.busSelfId,
                            busRegRoute: businfo.busRegRoute,
                            busCompany: businfo.busCompany,
                            proId: businfo.proId,
                            busType: businfo.busType
                        })
                        .then((res) => {
                            let code = res.data.code;

                            if (code == 2) {
                                _this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                _this.detailShow_xinzeng = false;
                                _this.changePageList(1, _this.numVal);
                            } else if (code == 3) {
                                _this.$message.error(res.data.msg);
                            }

                        }).catch()
                } else {
                    return false;
                }
            })
            _this.detailShow = false;
        },
        showDetailPage(busNumber) {
            let _this = this;
            _this.$axios.get("/businfo/detail?busNumber=" + busNumber)
                .then((res) => {
                    let businfo = res.data.data;
                    _this.detailBusInfo = {
                        busNumber: businfo.busNumber,
                        proName: businfo.proName,
                        busRegion: businfo.busRegion,
                        busSelfId: businfo.busSelfId,
                        busCompany: businfo.busCompany,
                        busRegRoute: businfo.busRegRoute,
                        hostIp: businfo.hostIp,
                        deviceId: businfo.deviceId,
                    };
                    _this.detailShow = true;
                }).catch()
        },

        getProjectList() {
            let _this = this;
            _this.$axios
                .get("/project/getAll")
                .then((res) => {
                    res.data.data.forEach((pro) => {
                        _this.ssxm.push({
                            value: pro.pid,
                            label: pro.proName,
                        });
                    });
                })
                .catch();
        },

        resetCondition() {
            let _this = this;
            _this.searchCondition = {
                busNumber: "",
                busSelfId: "",
                busRegion: "",
                proId: "",
                hostIp: "",
            }
            this.changePageList(1, _this.numVal);
        },

        conditionSearch(page, limit) {
            let _this = this;
            _this.$axios.post("businfo/condition/" + page + "/" + limit, {
                busNumber: _this.searchCondition.busNumber,
                busSelfId: _this.searchCondition.busSelfId,
                regionCode: _this.searchCondition.busRegion.length == 0 ?
                    "" : _this.searchCondition.busRegion[_this.searchCondition.busRegion.length - 1],
                proId: _this.searchCondition.proId,
                hostIp: _this.searchCondition.hostIp,
            }).then((res) => {
                let data = res.data.data;
                let records = data.records;
                _this.infoTotal = data.total;
                _this.totalPage = _this.infoTotal;
                _this.pageSize = _this.numVal;
                _this.clDetails = [];
                for (let i = 0; i < records.length; i++) {
                    let businfo = records[i];
                    this.clDetails.push({
                        id: (page - 1) * limit + 1 + i,
                        busNumber: businfo.busNumber,
                        busSelfId: businfo.busSelfId,
                        busType: businfo.busType,
                        busRegion: businfo.busRegion,
                        busRegRoute: businfo.busRegRoute,
                        busCompany: businfo.busCompany,
                        proName: businfo.proName,
                        hostIp: businfo.hostIp,
                        deviceId: businfo.deviceId,
                    });
                }
            }).catch()
        },

        hide_pl() {
            let _this = this;
            _this.fileList = [];
            _this.ssxmVal = null;
            _this.isopen_pl = !_this.isopen_pl;
        },
        // 隐藏主机ID信息表单
        hide_info() {
            let _this = this;
            _this.isinfo = !_this.isinfo;
        },
        // 显示入库表单 同时隐藏新增信息表单
        newhide() {
            let _this = this;
            _this.isnew = !_this.isnew;
            _this.isopen = !_this.isopen;
        },
        // 隐藏入库表单
        quxiaohide() {
            let _this = this;
            _this.isnew = !_this.isnew;
        },

        handleCurrentChange(val) {
            this.currenPage = val;
            this.changePageList(val, this.numVal);
        },
        pageTotalChange(val) {
            this.totalPage = Math.ceil(this.infoTotal / val);
            this.changePageList(1, val);
        },
        pageReset() {
            this.changePageList(this.currenPage, this.numVal);
        },
        goPage(){
        console.log("this.totalPage",this.totalPage,this.pageSize,this.pageNumber,this.currenPage);
        if(this.totalPage<=this.pageSize){
          this.pageNumber =  this.currenPage = 1;
        }else{
          //判断一共有多少页
          let page = Math.ceil(this.totalPage/this.pageSize);
          this.pageNumber = this.pageNumber>page?page:this.pageNumber;
          this.currenPage = Number(this.pageNumber) ;
        }
        this.conditionSearch(this.pageNumber,this.numVal)
      },
        changePageList(page, limit) {
            this.$axios
                .get("businfo/busInfoPage/" + page + "/" + limit)
                .then((res) => {
                    let data = res.data.data;
                    let records = data.records;
                    this.infoTotal = data.total;
                    this.totalPage = this.infoTotal;
                    this.pageSize = this.numVal;
                    this.clDetails = [];
                    for (let i = 0; i < records.length; i++) {
                        let businfo = records[i];
                        this.clDetails.push({
                            id: (page - 1) * limit + 1 + i,
                            busNumber: businfo.busNumber,
                            busSelfId: businfo.busSelfId,
                            busType: businfo.busType,
                            busRegion: businfo.busRegion,
                            busRegRoute: businfo.busRegRoute,
                            busCompany: businfo.busCompany,
                            proName: businfo.proName,
                            hostIp: businfo.hostIp,
                            deviceId: businfo.deviceId,
                        });
                    }
                    
                    //
                })
                .catch();
        },
        moreEditInfo() {
            let _this = this;
            if (_this.moreInfoShow == false) {
                _this.$refs.busInfo_edit.style.height = "480px";
                _this.moreInfoShow = !_this.moreInfoShow;
            } else {
                _this.$refs.busInfo_edit.style.height = "350px";
                _this.moreInfoShow = !_this.moreInfoShow;
            }
        },
        showdetail_bianji(busNumber) {
            let _this = this;
            _this.$axios.get("/businfo/detail?busNumber=" + busNumber)
                .then((res) => {
                    let businfo = res.data.data;
                    _this.editBusInfo = {
                        busNumber: businfo.busNumber,
                        proId: businfo.proId,
                        busRegion: businfo.busRegion,
                        busSelfId: businfo.busSelfId,
                        busCompany: businfo.busCompany,
                        busRegRoute: businfo.busRegRoute,
                        hostIp: businfo.hostIp,
                        deviceId: businfo.deviceId,
                        busType: businfo.busType,
                        busDriver: businfo.busDriver,
                        busColor: businfo.busColor
                    };
                    _this.proChange(businfo.proId);
                    _this.detailShow_bianji = true;
                }).catch()
        },
        busInfoEditConfirm(formName) {
            let _this = this;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    let busInfo = _this.editBusInfo;
                    _this.$axios.post("businfo/edit", {
                            busNumber: busInfo.busNumber,
                            busSelfId: busInfo.busSelfId,
                            busRegRoute: busInfo.busRegRoute,
                            busCompany: busInfo.busCompany,
                            proId: busInfo.proId,
                            busType: busInfo.busType,
                            busColor: busInfo.busColor,
                            busDriver: busInfo.busDriver
                        })
                        .then((res) => {
                            let code = res.data.code;
                            if (code == 2) {
                                _this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                _this.detailShow_bianji = false;
                                _this.editBusInfo.busRegion = [];
                                _this.changePageList(1, _this.numVal);
                            } else if (code == 3) {
                                _this.$message.error(res.data.msg);
                            }
                        }).catch()
                } else {
                    return false;
                }
            })
        },
        busInfoEditCancel() {
            let _this = this;
            this.$confirm('确认不保存信息关闭？')
                .then(e => {
                    _this.detailShow_bianji = false;
                    _this.editBusInfo.busRegion = [];
                    _this.$refs['busInfo_edit'].resetFields();
                })
                .catch(e => {});
        },
        async isRepeat(busNumber) {
            let _this = this;
            let isRepeat = true;
            await _this.$axios.get(`/businfo/detail?busNumber=${busNumber}`)
                .then((res) => {
                    let data = res.data.data;
                    if (typeof data == 'undefined' || data == null) isRepeat = false;
                })
            return isRepeat;
        }
    },
};
</script>

<style lang="scss">
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: rgba(1, 1, 1, 0) !important;
}

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
    border-bottom-color: rgba(1, 1, 1, 0) !important;
}

.pro-wrapper {
    width: 290px;
    height: auto;
    font-size: 14px;
    border-radius: 4px !important;
    font-family: "Micrisoft Yahei";
    font-weight: 400;
    word-wrap: break-word;
    color: white;
    background: rgba(0, 0, 0, 0.8) !important;
    box-shadow: 1px 1px 10px 3px #D3D3D6;
}
</style><style scoped>
button {
    cursor: pointer;
}

/* 内容区底部样式 */
.goPage>button:hover {
    cursor: pointer;
}

.goPage>button {
    width: 60px;
    height: 30px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
}

.goPage>span:nth-of-type(2) {
    padding-left: 48px;
    padding-right: 8px;
}

.goPage>span:nth-of-type(1) {
    padding-right: 8px;
}

.ZTfooter>.goPage {
    position: absolute;
    right: 10px;
    top: 10px;
}

.goPage>>>.el-input {
    width: 0 !important;
}

.goPage>.el-input>>>.el-input__inner {
    width: 40px !important;
    height: 30px !important;
    padding: 0 5px !important;
}

.el-pagination {
    position: absolute;
    right: 190px;
    top: 10px;
}

.ZTfooter>.el-select>>>.el-input__icon {
    line-height: 30px !important;
}

.ZTfooter>.el-select>>>.el-input__inner {
    width: 100px;
    height: 30px;
}

.ZTfooter>span:nth-of-type(1) {
    margin-right: 16px;
}

.ZTfooter {
    height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid #cccccc;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 0 16px;
    margin-top: 4px;
    position: relative;
}

.ZT_bg {
    background: #f5f5f5;
}

/* 设备状态表格 */
.ZTcontent {
    height: calc(100% + 24px);
    background-color: #fff;
    margin-top: 8px;
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
}

/* 查询按钮 */
.ZTnav button:nth-of-type(2) {
    color: #fff;
    background: url(../../static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.ZTnav button:nth-of-type(1) {
    background: url(../../static/img/sx.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.ZTnav button {
    float: right;
    width: 80px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    margin: 40px 8px 16px 8px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
}

/* 输入搜索框 */
.el-select>>>.el-input__icon {
    line-height: 36px !important;
}

.el-select>>>.el-input__inner,
.el-input>>>.el-input__inner:hover {
    border: 1px solid #3c74e3;
}

.el-select>>>.el-input__inner,
.el-input>>>.el-input__inner {
    width: 200px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 8px;
    box-sizing: border-box;
}

.ZTinpt>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.6);
}

.ZTinpt {
    width: 198px;
    padding-left: 16px;
    margin-top: 12px;
    display: inline-block;
}

/* 内容导航区 */
.ZTnav {
    width: 100%;
    height: 96px;
    background-color: #fff;
    margin-top: 2px;
    margin-right: 8px;
}

.CLGL {
    height: calc(100% - 177px);
}

.ZTinfo {
    position: relative;
    height: 48px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    display: flex;
    align-items: center;
}

.ZTinfo button {
    float: right;
    width: 100px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
}

.ZTinfo button:nth-of-type(2) {
    position: absolute;
    right: 0px;
    bottom: 16px;
    background: url(/static/img/daoru.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.ZTinfo button:nth-of-type(1) {
    position: absolute;
    right: 116px;
    bottom: 16px;
    color: #fff;
    background: url(/static/img/xinzeng.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

/* -----公交车信息------ */

.detail_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    /* margin-bottom: 20px; */
}

.detail_header .detail_title {
    position: relative;
    font-size: 16px;
    left: 20px;
    color: rgba(0, 0, 0, 0.88);
    font-family: Arial;
    font-weight: bold;
}

.busDetail .formItem {
    width: 100%;
    position: relative;
    /* right: 40px; */
    top: 16px;
    left: 13px;
}

.busDetail>>>.el-form-item {
    margin: 0 0 16px 0 !important;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
}

.busDetail>>>.el-form-item__label {
    font-weight: 400;
    color: #666666;
    padding-right: 8px;
    height: 36px;
}

.busDetail>>>.el-form-item__content {
    background-color: #EEEEEE;
    width: 192px;
    height: 36px;
    color: #000000;
    border-radius: 4px;
    padding-left: 8px;
}

/* 
.busDetail .modify-history {
    position: relative;
    top: 40px;
    left: 40px;
}

.modify-history .mod-tag {
    border-left: 2px solid #3C74E3;
    margin: 3px 8px 3px 1px;
    height: 20px;
    display: inline;
}

.modify-history .mod-title {
    width: 56px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
    display: inline;
} */
/* ----------------2021.1222--------------- */
/* 公交车信息编辑 */
.busInfo_edit {
    width: 650px;
    height: 350px;
    background: #fff;
    position: fixed;
    left: 35%;
    top: 30%;
    z-index: 999;
    /* border: 1px solid #000;*/
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
    transition: all .5s ease-in-out;
}

/deep/ .el-dialog__header {
    padding: 0;
    transition: all .5s ease-in-out;
}

/deep/ .el-dialog {
    border-radius: 8px;
}

/deep/ .el-dialog__body {
    padding-top: 0;
}

.edit_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    /* margin-bottom: 20px; */
}

.edit_header .edit_title {
    position: relative;
    font-size: 16px;
    left: 20px;

    color: #303133;
    font-family: Arial;
    font-weight: bold;
}

.busInfo_edit .formItem {
    width: 100%;
    position: relative;
    left: 0px;
    top: 13px;
}

.busInfo_edit>>>.el-form-item__label {
    font-weight: 400;
    color: #666666;
    padding-right: 8px;
    height: 36px;
}

.busInfo_edit>>>.el-form-item__content {
    width: 192px;
    height: 36px;
    color: #000000;
    padding-left: 8px;
}

.more_edit {
    /* margin-top: 20px; */
    position: absolute;
    bottom: 54px;
    left: calc(50% - 24px);
}

.more_edit>>>i {
    font-size: 32px;
    /* background-size: 64px 32px; */
    margin-top: -10px;
    cursor: pointer;
}

.edit_cancel {
    text-align: center;
    width: 120px;
    height: 36px;
    color: #3C74E3;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 20px;
    left: 354px;
}

.edit_confirm {
    text-align: center;
    width: 120px;
    height: 36px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

/* ---------------------2021.1222----------------------------- */
/* .busDetail_bianji_an .edit_confirm,
.busDetail_bianji_an .edit_cancel{
    position:relative;
    left: 50%;
} */

/* 公交车信息新增 */
.busInfo_add {
    width: 650px;
    height: 296px;
    background: #fff;
    position: fixed;
    left: 35%;
    top: 30%;
    z-index: 999;
    /* border: 1px solid #000;*/
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
}

.add_header {
    height: 48px !important;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex !important;
    width: 100%;
}

.add_header>>>.el-form-item__label {
    position: relative;
    font-size: 14px;
    width: auto;
    left: 13px;
    color: #666666;
    font-weight: 400;
    width: 70px !important;
    margin-right: 13px;
}

.add_header>.el-input {
    position: relative;
    left: 27px;
    width: 200px;
}

.busInfo_add .formItem {
    width: 100%;
    position: relative;
    top: 16px;
    left: 13px;
}

.busInfo_add>>>.el-form-item {
    margin: 0 0 16px 0 !important;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
}

.form-item-project .el-select {
    width: auto;
}

.form-item-project>>>.el-input__inner,
.form-item-project>>>.el-textarea__inner {
    width: 200px !important;
}

.busInfo_add .formItem>>>.el-cascader {
    width: auto !important;
}

.busInfo_add .formItem>>>.el-cascader .el-input__inner {
    width: 200px !important;
}

.add_cancel {
    text-align: center;
    width: 120px;
    height: 36px;
    color: #3C74E3;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 20px;
    left: 354px;
}

.add_confirm {
    text-align: center;
    width: 120px;
    height: 36px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

/* ------------------------------------------------- */
/* 右上角小按钮 */
.quxiao {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 20px;
    right: 16px;
    background: url(/static/img/close_b.png) no-repeat;
    background-size: 16px;
    cursor: pointer;
}

/* 横线 */
.link_top {
    position: absolute;
    width: 90%;
    height: 1px;
    border-top: solid rgb(170, 170, 170) 1px;
    top: 9%;
    left: 4%;
}

.link_down {
    position: absolute;
    width: 90%;
    height: 1px;
    border-top: solid rgb(170, 170, 170) 1px;
    bottom: 40%;
    left: 4%;
}

.texta {
    width: 95%;
    height: 110px;
    position: absolute;
    bottom: 25%;
    left: 4%;
    overflow-y: scroll;
    white-space: nowrap;
    font-size: 20px;
}

.texta::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 50px;
}

.texta::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 5px #fff;
    background: rgb(215, 215, 215);
}

.texta::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #fff;
    background: #fff;
}

/* 按钮 */
.qd {
    width: 100px;
    height: 40px;
    position: absolute;
    bottom: 20%;
    left: 30%;
    color: #fff;
    background-color: #169BD5;
    border-radius: 8px;
    cursor: pointer;
}

.qx {
    width: 100px;
    height: 40px;
    position: absolute;
    bottom: 20%;
    left: 50%;
    background-color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
}

.newbusinfo>div:nth-child(2) {
    position: absolute;
    top: -5px;
    left: 70px;
}

/* 批量管理 */

.import_dialog>>>.cancel {
    position: absolute;
    width: 80px;
    height: 36px;
    background: white;
    border-radius: 4px;
    border-width: 1px;
    border-color: #3c74e3;
    /* border: none; */
    color: #3C74E3;
    font-size: 14px;
    right: 116px;
    bottom: 20px;
    display: none;
}

.import_dialog>>>.confirm {
    position: absolute;
    width: 80px;
    height: 36px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
    font-size: 14px;
    right: 20px;
    bottom: 20px;
    display: none;
}

.import_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    /* margin-bottom: 20px; */
}

.import_header .import_title {
    position: relative;
    font-size: 16px;
    left: 20px;
    color: rgba(0, 0, 0, 0.88);
    font-family: Arial;
    font-weight: bold;
}

/deep/ .el-upload-dragger {
    top: -10px;
    width: 352px;
    height: 234px;
}

/deep/ .upload-text {
    position: relative;
    top: calc(50% - 40px);
    left: calc(50% - 141px);
    height: 80px;
    width: 282px;
}

/deep/ .el-upload-text-b,
/deep/ .el-icon-upload {
    color: #3C74E3 !important;
}

/deep/ .el-icon-upload {
    line-height: 32px !important;
    margin: 0px !important;
    font-size: 32px !important;
}

/deep/ .el-upload-text-b {
    top: 8px;
    font-size: 14px !important;
    font-family: "PingFang SC";
}

/deep/ .el-upload-text {
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.4);
}

/deep/ .el-form-item__label:before {
    margin: 0 !important;
    color: #F9243D !important;
}

/deep/ .el-form-item__error {
    color: #F9243D;
    font-size: 6px;
    line-height: 0.1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
}

/* 上传文件后的列表格式 */
.upload-demo /deep/ .el-upload-list__item {
    font-size: 22px;
    background: rgb(249, 249, 249);
    border-bottom: 3px solid rgba(226, 226, 226);
    position: relative;
    top: -10px;
}

/* .piliang:hover {
    display: block;
} */

.plneicheng {
    margin: 20px;
    width: 352px;
    height: 282px;
    /* border: #dddddd dashed 1px; */
    position: relative;
}

.ssxm {
    margin-bottom: 20px;
}

.ssxm button {
    text-align: center;
    position: relative;
    left: 8px;
    width: 64px;
    height: 32px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
}

#jilu {
    margin-top: 20px;
    box-sizing: border-box;
}

#jilu>div:first-child {
    padding-left: 40px;
}

.biangeng>p {
    padding-left: 56px;
}

/* eltable */

.clgl_table {
    height: calc(100% - 102px);
    overflow-y: scroll;

}

/* 滚动条样式 */
.clgl_table::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.clgl_table::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #3c74e3;
}

.clgl_table::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f5f5f5;
}

.clgl_table>>>.table_key {
    color: #3C74E3;
    cursor: pointer;
}

/deep/ .el-table th.el-table__cell.is-leaf,
/deep/ .el-table td.el-table__cell {
    border: none !important;
}

/deep/ .el-table th {
    padding: 0 !important;
    height: 48px !important;

}

/deep/ .el-table th.el-table__cell.is-leaf .cell {
    line-height: 32px;
    border-left: 1px solid #cccccc !important;
}

/deep/ .el-table .el-table__row td {
    padding: 0 !important;
    height: 40px;
}

/deep/ .el-table .el-table__row td div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/deep/ .el-table th:nth-child(1).el-table__cell.is-leaf .cell {
    border: none !important;
}

/deep/ .el-table--border,
.el-table--group {
    border: none;
}

/deep/ .el-table .el-table__row--striped td {
    background-color: #f5f5f5 !important;
}
</style>
